<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <div>
      <el-form v-show="showSearch" ref="queryForm" label-width="70">
        <el-row>
          <el-col :span="8">
            <el-form-item label="操作时间">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="详细操作">
              <el-input v-model="queryParams.content" placeholder="操作" clearable style="width: 300px" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="类型">
              <el-radio-group v-model="queryParams.typeLabel">
                <el-radio-button label="全部" />
                <el-radio-button label="收入" />
                <el-radio-button label="支出" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="search">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <div style="margin-top: 5px">
      <el-table v-loading="loading" :data="detailList">
        <el-table-column type="index" align="center" />
        <el-table-column label="姓名" prop="nickName" align="center" />
        <el-table-column label="时间" prop="date" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            {{ scope.row.operationId | operationFilter }}
          </template>
        </el-table-column>
        <el-table-column label="详细操作" prop="content" align="center" />
        <el-table-column label="类型" prop="type" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.type === '收入' ? 'success' : 'info'">{{ scope.row.type === 1 ? '收入' : '支出' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="积分数" prop="integral" align="center">
          <template slot-scope="scope">
            {{ scope.row.type === '收入' ? '+' : '-' }}{{ scope.row.integral }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页  -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listDetails, getDetails, delDetails, addDetails, updateDetails, exportDetails } from '@/api/integral/details'

let app

export default {
  name: 'Detail',
  filters: {
    operationFilter: function(val) {
      let rtn = '未知类型'
      app.operationType.forEach(item => {
        // eslint-disable-next-line eqeqeq
        if (item.dictValue == val) {
          rtn = item.dictLabel
        }
      })
      return rtn
    }
  },
  data() {
    return {
      loading: false,
      // 是否显示搜索框
      showSearch: true,
      name: '',
      dateRange: [],
      operation: '',
      type: '全部',
      // 只有前端时 搜索用
      originalList: [],
      detailList: [],
      // 操作类型列表
      operationType: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: this.$route.query.person.nickName,
        date: null,
        operationId: null,
        content: null,
        type: null,
        integral: null,
        typeLabel: '全部'
      },
      // 分页数据
      total: 0
    }
  },
  // 为了让 filters 能取到 data 中的数据
  beforeCreate() {
    app = this
  },
  mounted() {
    this.getList()
    this.getDicts('int_detail_type').then(response => {
      this.operationType = response.data
    })
  },
  methods: {
    getList() {
      this.loading = true
      listDetails(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.detailList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 条件搜索
    search() {
      if (this.queryParams.typeLabel === '收入') {
        this.queryParams.type = 1
      } else if (this.queryParams.typeLabel === '支出') {
        this.queryParams.type = 0
      } else {
        this.queryParams.type = null
      }
      this.getList()
    }
  }
}
</script>

<style>

</style>
